import { useCallback, useEffect, useState } from 'react';
import styled from 'styled-components';

const ErrorSection = styled.section`
  /* position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0; */
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;

  background: #0f3854;
  background: -webkit-radial-gradient(center ellipse, #0a2e38 0%, #000000 70%);
  background: radial-gradient(ellipse at center, #0a2e38 0%, #000000 70%);
  background-size: 100%;

  .error-content {
    /* position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%); */

    font-family: 'Share Tech Mono', monospace;
    color: #daf6ff;
    text-align: center;
    text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
    p {
      margin: 0;
      padding: 0;
    }
    .error-desc {
      letter-spacing: 0.1em;
      font-size: 15px;
    }

    .error-time {
      padding: 5px 0;
      font-size: 60px;
      letter-spacing: 0.05em;
    }

    .error-date {
      padding: 20px 0 0;
      font-size: 12px;
      letter-spacing: 0.1em;
    }
  }
`;

const week = [
  '星期日',
  '星期一',
  '星期二',
  '星期三',
  '星期四',
  '星期五',
  '星期六',
];

const Error404: React.FC = () => {
  const [time, setTime] = useState('');
  const [date, setDate] = useState('');

  const paddingZero = (num: number, digit: number) => {
    num;
    return num;
  };

  const zeroPadding = (num: number, digit: number) => {
    var zero = '';
    for (var i = 0; i < digit; i++) {
      zero += '0';
    }
    return (zero + num).slice(-digit);
  };

  const updateTime = useCallback(() => {
    const now = new Date();
    setTime(
      zeroPadding(now.getHours(), 2) +
        ':' +
        zeroPadding(now.getMinutes(), 2) +
        ':' +
        zeroPadding(now.getSeconds(), 2),
    );
    setDate(
      zeroPadding(now.getFullYear(), 4) +
        '-' +
        zeroPadding(now.getMonth() + 1, 2) +
        '-' +
        zeroPadding(now.getDate(), 2) +
        ' ' +
        week[now.getDay()],
    );
  }, []);

  useEffect(() => {
    setInterval(updateTime, 1000);
    updateTime();
  }, [updateTime]);

  return (
    <ErrorSection>
      <div className="error-content">
        <p className="error-desc">...404 这个网页还没开发好...</p>
        <p className="error-time">{time}</p>
        <p className="error-date">{date}</p>
      </div>
    </ErrorSection>
  );
};

export default Error404;
